<template>
  <div>
    <div class="banner">
      <img src="../assets/images/logo1.png" style="display: block;margin:0 auto 0;max-width:90%">
    </div>

    <!-- 导航条部分 -->
    <div class="nav">
      <ul>
        <li v-for="item in navlist" @click="link(item)">
          <img :src="require('../assets/images/'+item.icon)" >
          <span>{{item.title}}</span>
        </li>

      </ul>
      <div class="zhibanbiao2" v-if="isYqlj">
        <ul class="date">
            <div class="date2_li" v-for="item in qyljList">
            	<a><i class="iconfont icon-lianjie1"></i>{{item.title}}</a>
            </div>
        </ul>
    </div>
      <!-- 值班表 -->
      <div class="zhibanbiao">
        <ul class="date">
          <div class="date_li">
            <div class="date_li_top">
              <p> 7月1日星期一</p>
            </div>
            <div class="date_li_bottom">
              <p>值班首长：张录文</p>
              <p>作战助力：金嘉平</p>
              <p>作战助力：金嘉平</p>
              <p>作战助力：金嘉平</p>
              <p>作战助力：金嘉平</p>
              <p>作战助力：金嘉平</p>
              <p>作战助力：金嘉平</p>
              <p>作战助力：金嘉平</p>
            </div>
          </div>
          <div class="date_li">
            <div class="date_li_top">
              <p> 7月1日星期二</p>
            </div>
            <div class="date_li_bottom">
              <p>值班首长：张录文</p>
              <p>作战助力：金嘉平</p>
              <p>作战助力：金嘉平</p>
              <p>作战助力：金嘉平</p>
              <p>作战助力：金嘉平</p>
              <p>作战助力：金嘉平</p>
              <p>作战助力：金嘉平</p>
              <p>作战助力：金嘉平</p>
            </div>
          </div>
          <div class="date_li">
            <div class="date_li_top">
              <p> 7月1日星期三</p>
            </div>
            <div class="date_li_bottom">
              <p>值班首长：张录文</p>
              <p>作战助力：金嘉平</p>
              <p>作战助力：金嘉平</p>
              <p>作战助力：金嘉平</p>
              <p>作战助力：金嘉平</p>
              <p>作战助力：金嘉平</p>
              <p>作战助力：金嘉平</p>
              <p>作战助力：金嘉平</p>
            </div>
          </div>
          <div class="date_li">
            <div class="date_li_top">
              <p> 7月1日星期四</p>
            </div>
            <div class="date_li_bottom">
              <p>值班首长：张录文</p>
              <p>作战助力：金嘉平</p>
              <p>作战助力：金嘉平</p>
              <p>作战助力：金嘉平</p>
              <p>作战助力：金嘉平</p>
              <p>作战助力：金嘉平</p>
              <p>作战助力：金嘉平</p>
              <p>作战助力：金嘉平</p>
            </div>
          </div>
          <div class="date_li">
            <div class="date_li_top">
              <p> 7月1日星期五</p>
            </div>
            <div class="date_li_bottom">
              <p>值班首长：张录文</p>
              <p>作战助力：金嘉平</p>
              <p>作战助力：金嘉平</p>
              <p>作战助力：金嘉平</p>
              <p>作战助力：金嘉平</p>
              <p>作战助力：金嘉平</p>
              <p>作战助力：金嘉平</p>
              <p>作战助力：金嘉平</p>
            </div>
          </div>
          <div class="date_li">
            <div class="date_li_top">
              <p> 7月1日星期六</p>
            </div>
            <div class="date_li_bottom">
              <p>值班首长：张录文</p>
              <p>作战助力：金嘉平</p>
              <p>作战助力：金嘉平</p>
              <p>作战助力：金嘉平</p>
              <p>作战助力：金嘉平</p>
              <p>作战助力：金嘉平</p>
              <p>作战助力：金嘉平</p>
              <p>作战助力：金嘉平</p>
            </div>
          </div>
          <div class="date_li">
            <div class="date_li_top">
              <p> 7月1日星期日</p>
            </div>
            <div class="date_li_bottom">
              <p>值班首长：张录文</p>
              <p>作战助力：金嘉平</p>
              <p>作战助力：金嘉平</p>
              <p>作战助力：金嘉平</p>
              <p>作战助力：金嘉平</p>
              <p>作战助力：金嘉平</p>
              <p>作战助力：金嘉平</p>
              <p>作战助力：金嘉平</p>
            </div>
          </div>

        </ul>
      </div>
    <!-- 搜索框 -->
    <div v-if="isSearch" class="searchPosititon">
        <img class="tr" src="../assets/images/search-tr.png">
        <div class="searchPosititon_input">
            <el-input v-model="searchTitle" placeholder="请输入您要搜索的内容..." class="searchPosititon_inputinput"></el-input>
            <el-button class="searchPosititon_inputbtn" @click="goTo('searchresult',searchTitle)"></el-button>
        </div>
        <el-button class="gjssbtn" @click="goTo('searchresult')">高级搜索</el-button>
    </div>
    </div>
  </div>
</template>
<script>
  import { queryCascadePage  } from "@/api/webpage";
export default {
  name: "Header",
  props: {
    id: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      navlist:[
            {title:'首页', type:'link', url:'/',icon:'shouye.png'},
            {title:'支队概况', type:'linkParams', url:'C0A8B1507E0441F28FA9448DF52AC6DC',navId:10,icon:'zhidui.png'},
            {title:'今日值班',type:'click', url:'',icon:'zhiban.png'},
            {title:'通讯录',type:'linkParams', url:'2293BE31C5B4449FA5487BA2228BA6ED',navId:11,icon:'txl.png'},
            {title:'下载中心',type:'linklistParams', navId:12, url:'10787732C3474762AA46DCDA93F4F038',icon:'xiazai.png'},
            {title:'政策法规',type:'linklistParams', navId:13, url:'10E6E8E122AC493D865969214DA79DD8',icon:'zhengce.png'},
            {title:'在线投稿',type:'link', url:'/',icon:'zaixian.png'},
            {title:'视频点播',type:'linklistParams', navId:15, url:'1817DA29BBB047B7ADBE6F6D1EC65301',icon:'shipin.png'},
            {title:'旧版网站',type:'openwindow', url:'/',icon:'jiuban.png'},
            {title:'友情链接',type:'click', url:'yqlj',icon:'youqing.png'},
            {title:'搜索',type:'click', url:'search',icon:'sousuo.png'},
        ],
        isSearch:false,
        searchTitle:'', //搜索标题
        isYqlj:false,
        qyljList:[]
    };
  },
  created() {

  },
  mounted() {

  },
  methods: {
    getyqlj(id){
      queryCascadePage({columnId:id,pageNum:1,pageSize:100}).then(res=>{
            if(res.code == 0){
                this.qyljList = res.rows
            }
        })
    },
    link(row){
     if(row.type == 'link'){
        this.$router.push({name: row.url})
      }else if(row.type == "click"){
            if(row.url == 'search'){
                this.isYqlj = false
                this.isSearch = !this.isSearch
            }else if(row.url == 'yqlj'){
              this.getyqlj('16D0E38381094EF29885ACA54294F88D')
                this.isSearch = false
                this.isYqlj = !this.isYqlj
            }else{
              this.$message.warning("抱歉，正在开发中")
            }
      }else if(row.type == 'linkParams'){
        this.$router.push({
            name: 'articlecontent',
            query:{ id:row.url,navId:row.navId}
        })
      }else if(row.type == 'linklistParams'){
        this.$router.push({
            name: 'articlelistpage',
            query:{navId:row.navId,id:row.url}
        })
      }

    },
    goTo(url,title){
        this.$router.push({
            name: url,
            query:{title:title}
        })
    }
  },
};
</script>
